<template>
    <div class="news-card" @click="viewDetails(newsData.id)">
        <div class="news-card--title">{{ newsData.title }}</div>
        <div class="news-card--content">{{ newsData.content }}</div>
        <div class="news-card--info">
            <div class="info--left">
                <div class="domain"><span>{{ newsData.domain }}</span></div>
                <div class="country">{{ newsData.country }}</div>
            </div>
            <div class="info--right">
                <div class="source"><i></i>{{ newsData.source }}</div>
                <div class="time"><i></i>{{ newsData.time }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NewsCard",
        props: {
            newsData: {
                type: Object,
                required: false,
                default: function () {
                    return {
                        id: 0,
                        title: "--",
                        content: "-----",
                        domain: "--",
                        country: "--",
                        source: "--",
                        time: "---"
                    }
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            viewDetails(id) {
                console.log(id)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .news-card {
        .news-card--title {

        }
        .news-card--content {

        }
        .news-card--info {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
            .info--left {
                display: flex;
                .domain {
                    margin: 0 10px;
                    span {
                        display: inline-block;
                        height: 20px;
                        line-height: 20px;
                        background: #f90;
                    }
                }
                .country {

                }
            }
            .info--right {
                display: flex;
                i {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                }
                .source {
                    margin: 0 40px;
                    i {
                        background: #f99;
                    }
                }
                .time {
                    i {
                        background: #99f;
                    }
                }
            }
        }
    }
</style>
